<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精彩瞬间</title>
    <link rel="stylesheet" href="/css/mobile/index.css">
    <!-- 重置默认样式 -->
    <link rel="stylesheet" href="/css/resetcss.css">

    <style>
               
        
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="navbar-container">
            <div class="nav-item active">
                <a href="#" class="nav-home">
                    <i class="fas fa-home"></i>
                    <span>主页</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-life">
                    <i class="fas fa-camera"></i>
                    <span>生活瞬间</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-tour">
                    <i class="fas fa-plane"></i>
                    <span>旅行记录</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-atlas">
                    <i class="fas fa-images"></i>
                    <span>精彩图集</span>
                </a>
            </div>
            <div class="nav-item">
                <a href="#" class="nav-center">
                    <i class="fas fa-user"></i>
                    <span>个人中心</span>
                </a>
            </div>
        </div>
    </nav>

    <!-- 未来搜索框 -->
    <div class="search">
        
    </div>
    
    <!-- 内容区域 -->
    <div class="content">
        <div class="photo-grid">
            <!-- 图片项 1 -->
            <div class="photo-item">
                <a href="#" class="photo-create">
                    <div class="photo-img">
                        <img src="https://picsum.photos/500/500?random=1" alt="生活瞬间">
                    </div>
                    <div class="photo-info">
                        <div class="photo-title">新建瞬间</div>
                        <div class="photo-date">开始创建专属于你的精彩瞬间。</div>
                    </div>
                </a>
            </div>
            
        </div>
        
        <button class="load-more">加载更多</button>
    </div>
    
</body>
    
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
<script src="/configfile/config.js"></script>
<script type="module">
    
	//window.__ENV__   这样来读取env环境变量里面公开出来的变量

	//获取导航的a标签，并设置href
	const navhome = document.querySelector('.nav-home'); // 返回第一个匹配的节点
	const navlife = document.querySelector('.nav-life'); // 返回第一个匹配的节点
	const navatlas = document.querySelector('.nav-atlas'); // 返回第一个匹配的节点
	const navcenter = document.querySelector('.nav-center');//获取个人中心DOM
    const photocreate = document.querySelector('.photo-create');//获取创建
    


	let server_ip = window.__ENV__.SERVER_IP;//服务器ip
	let home_ip = window.__ENV__.HOME_SERVER_IP;//首页ip
	navhome.href = home_ip;
	let life_ip = window.__ENV__.LIFEMOMENT_SERVER_IP;//生活瞬间
	navlife.href = life_ip;
	let atlas_ip = window.__ENV__.ATLAS_SERVER_IP;//图片集
	navatlas.href = atlas_ip;
	let user_ip = window.__ENV__.USER_SERVER_IP;//用户
    navcenter.href = user_ip;
    photocreate.href = life_ip + "/createshow"

	//获取令牌
	let token = localStorage.getItem("token");

    // 简单的导航栏交互效果
    document.querySelectorAll('.nav-item').forEach(item => {
        item.addEventListener('click', function() {
            document.querySelector('.nav-item.active').classList.remove('active');
            this.classList.add('active');
        });
    });
    
    // 模拟加载更多功能
    document.querySelector('.load-more').addEventListener('click', function() {
        this.textContent = '加载中...';
        setTimeout(() => {
            // 这里可以添加加载更多图片的逻辑
            this.textContent = '加载更多';
            alert('已加载更多内容');
        }, 1000);
    });

    //创建图片集合
    function createPhoto(card){
        let grid = document.querySelector(".photo-grid");
        //创建外壳
        let item = document.createElement("div");
        item.className = "photo-item";
        //创建跳转事件
        item.addEventListener("click", function(){
            axios
                .post(
                    life_ip + "/gettempcode",
                    {},
                    {
                        headers: {
                            "Authorization": `Bearer ${token}`
                        }
                    }
                )
                .then((res) => {
                    //判断后端的报错信息。如果存在则保存失败
                    
                    let tempToken = res.data.tempToken;
                    let href = life_ip + "/edit" + card.life_id;
                    // let newWindow = window.open(`${href}?tempToken=${tempToken}`, '_blank');
                    // // 4. 处理可能的浏览器拦截
                    // if (!newWindow || newWindow.closed) {
                    //     alert("请点击跳转");
                    //     // 备选方案：当前页跳转
                        window.location.href = `${href}?tempToken=${tempToken}`;
                    // }
                })
                .catch(err => {
                    console.log(err);
                    alert("拒绝访问");
                });
        });
        //创建图片
        let img = document.createElement("div");
        img.className = "photo-img";
        let image = document.createElement("img");
        image.src = card.imageurl;
        image.alt = card.title;

        img.appendChild(image);
        
        //创建内容
        let info = document.createElement("div");
        info.className = "photo-info";
        let title = document.createElement("div");
        title.className = "photo-title";
        title.textContent = card.title;
        let date = document.createElement("div");
        date.className = "photo-date";
        date.textContent = card.date;

        info.appendChild(title);
        info.appendChild(date);

        item.appendChild(img);
        item.appendChild(info);

        grid.appendChild(item);
    }


    //获取图片数据
    (function (){
        let cardsData = [];
        let findData = {
            condition: {},
            limit: {
                skip: 0,
                limit: 0,
                //排序，1正序，-1倒叙
                sort: { Lifecreatedate: -1 }
            }
        };
        axios
            .post(
                life_ip + "/findlife",
                findData,
                {
                    headers: {
                        "Authorization": `Bearer ${token}`
                    }
                }
            )
            .then((res) => {
                //判断后端的报错信息。如果存在则保存失败
                console.log(res.data.message.data);
                if(res.data.message.data.length !== 0){
                    res.data.message.data.forEach(data=>{
                        cardsData.push({
                            life_id: data.Life_id,
                            imageurl: data.Lifecoverurl,
                            title: data.Lifename,
                            description: data.Lifemessage,
                            date: data.Lifecreatedate.split('T')[0]
                        });
                    });
                    cardsData.forEach(data=>{
                        createPhoto(data);
                    });
                }else{
                    alert("请创建生活瞬间记录");
                }
            })
            .catch(err => {
                console.log(err);
                alert("未登录");
                window.location.href = user_ip + "/loginshow";
            });
    })();






</script>
</html>